<template>
	<view class="bodyy">
		<view style="height: 20rpx;"></view>
		<view class="card">
		  <view class="card-header">
		    <view class="icon-container"><u-icon name="calendar" size="45rpx" color="#000000"></u-icon></view>
		    <view class="title">{{item.name}}</view>
		    <view class="time">预约时间{{item.createTime}}</view>
		  </view>
		  <view class="card-content">
		    <view class="image-container">
		      <image class="imagg" :src="'http://101.43.223.224:8765/image/getImageById?id=' + item.images"></image>
		    </view>
		    <view class="details">
		      <view class="details-row">
		        <view class="label">上课时间：{{item.reservationTime}}</view>
		      </view>
		      <view class="details-row">
		        <view class="label">学员姓名：{{item.memberUserRealName}}</view>
		      </view>
		      <view class="details-row">
		        <view class="label">学员电话：{{item.memberUserPhone}}</view>
		      </view>
		      <view class="details-row">
		        <view class="label" style="margin-left: 5rpx;">训练时长：{{item.courseTime}}小时</view>
		      </view>
		    </view>
		  </view>
		</view>
		<view class="card2">
			<p>课程安排</p>
			<view class="card-content2" v-for="item in actionData">
				<view style="width: 60%;float: left;height: 120rpx">
					<view style="margin-top: 10rpx;font-size: 28rpx;">
						<text style="letter-spacing: 5rpx;text-indent: 20rpx;">动作:
							{{item.fitnessActionName}}×{{item.fitnessActionCount}}组</text>
					</view>
					<view style="margin-top: 10rpx;font-size: 28rpx;">
						<text style="letter-spacing: 5rpx;text-indent: 20rpx;">耗时: {{item.fitnessActionTime}}</text>
					</view>
				</view>
				<view
					style="width: 40%;float: left;height: 95rpx;display: flex;letter-spacing: 5rpx;justify-content: center;align-items: flex-end;font-size: 30rpx;">
					<picker v-show="showPickerFlag" mode="selector" :range="actionList" @change="onPickerChange"
						range-key="fitnessActionName">
						<text style="color: #94A9FD;" @click="showPicker(item)">更换动作</text>
					</picker>
				</view>
			</view>
		</view>


		<!-- <view class="card3">
			<view class="card3-v1">
				
				<view class="card3-v1-v1" @click="gophone()">
					<u-icon name="phone" size="25px"></u-icon><text>联系学员</text>
				</view>
				<view  class="card3-v1-v2">
					<u-icon name="edit-pen" size="25px"></u-icon><text>修改课程</text>
				</view>
			</view>
		</view> -->
		<view class="card3-v2">
			<view style="width: 90%;height: 120rpx;margin: 0 auto;">
				<view class="bottom1" @click="gophone()">
					<text>联系学员</text>
				</view>
				<view class="bottom2" @click="upReservationStatusOne()">开始训练</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPickerFlag: false, // 控制滑动选择器的显示与隐藏
				actionList: [], // 动作选项列表
				selectedAction: '', // 选择的动作
				item: {},
				actionData: [],
				fitnessActionId:0
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			this.item = JSON.parse(option.item) //打印出上个页面传递的参数。
			console.log(this.item);
			this.selectPlanAction()
			this.selectAction()
		},
		methods: {
			// 查询所有动作
			selectAction() {
				var ths = this;
				uni.request({
					url: this.URL + 'teacherReservation/selectAction',
					method: 'GET',
					// userInfo:res.
					success: function(res) {
						ths.actionList = res.data.data.data;
						console.log(ths.actionList);
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			// 查询用户计划所有动作
			selectPlanAction() {
				var ths = this;
				uni.request({
					url: this.URL + 'teacherReservation/selectPlanAction',
					method: 'GET',
					data: {
						uid: this.item.studentId,
					},
					// userInfo:res.
					success: function(res) {
						ths.actionData = res.data.data.data;
						console.log(ths.actionData);
					},
					fail: function(error) {
						// 处理请求失败
						console.error('角色查询失败,请检查网络');
					}
				})
			},
			onPickerChange(event) {
				const selectedIndex = event.detail.value; // 获取选中的索引
				const selectedAction = this.actionList[selectedIndex]; // 获取选中的对象数据
				// 修改计划中动作信息
				var ths = this;
				uni.request({
					url: this.URL + 'teacherReservation/updatePlanAction',
					method: 'POST',
					data: {
						fitnessActionId: selectedAction.id,
						id: this.fitnessActionId,
					},
					success: function(res) {
						if (res.data.code == 200) {
							// 添加消息提示
							uni.showToast({
								title: '操作成功',
								icon: 'success',
								duration: 2000
							});
							ths.selectPlanAction()
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('开启训练失败，请检查网络');
					}
				})
			},
			showPicker(item) {
				// 其他逻辑...
				this.fitnessActionId = item.id
			},
			// 开始训练方法
			upReservationStatusOne() {
				var ths = this;
				uni.request({
					url: this.URL + 'teacherReservation/upReservationStatusOne',
					method: 'POST',
					data: {
						id:this.item.id,
						coachId:uni.getStorageSync('teacherinfo').id,
						studentId: this.item.studentId
					}, 
					success: function(res) {
						if (res.data.code == 200) {
							wx.switchTab({
								url: '/pages/coach/home/anpai',
								success: function(e) {
									var page = getCurrentPages().pop();
									if (page == undefined || page == null) return;
									page.onLoad();
									// 添加消息提示
									uni.showToast({
										title: '操作成功',
										icon: 'success',
										duration: 2000
									});
								}
							});
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'error',
								duration: 2000
							});
						}

					},
					fail: function(error) {
						// 处理请求失败
						console.error('开启训练失败，请检查网络');
					}
				})
			},
			gophone() {
				uni.makePhoneCall({
					phoneNumber: this.item.memberUserPhone, //仅为示例
					success: function(res) {},
					fail: function(error) {
						// 处理请求失败
					}
				});
			},
		}
	}
</script>

<style>
	.card3-v2 {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		box-shadow: 0 2px 10px #dfdfdf;
		border-radius: 40rpx 40rpx 0 0;
		color: #5C5C5C;
	}

	,
	.card3-v1-v2 {
		height: 70rpx;
		border-left: 1px solid #5C5C5C;
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 1px;
		display: flex;
		letter-spacing: 10rpx;
		justify-content: flex-end;
		align-items: center;
		color: #5C5C5C;
	}

	,
	.card3-v1-v1 {
		height: 70rpx;
		border-right: 1px solid #5C5C5C;
		width: 50%;
		float: left;
		box-sizing: border-box;
		padding: 1px;
		display: flex;
		align-items: center;
		letter-spacing: 10rpx;
		color: #5C5C5C;
	}

	,
	.card3-v1 {
		height: 70rpx;
		width: 90%;
		margin: 0 auto;
	}

	,
	.card {
		width: 90vw;
		height: 320rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #dfdfdf;
		margin-bottom: 18px;
	}

	.card-header {
		height: 50rpx;
	}

	.icon-container {
		float: left;
	}

	.title {
		float: left;
	}

	.time {
		float: right;
		color: #5C5C5C;
		font-size: 25rpx;
		margin-top: 5rpx;
	}

	.card-content {
		width: 85vw;
		background-color: #F7F7F7;
		margin: 0 auto;
		height: 220rpx;
		padding: 5px;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.card-content2 {
		width: 100%;
		background-color: #F7F7F7;
		margin: 0 auto;
		height: 120rpx;
		padding: 5px;
		box-sizing: border-box;
		margin-top: 10rpx;
		color: #5C5C5C;
	}

	.image-container {
		width: 160rpx;
		height: 220rpx;
		float: left;
	}

	.imagg {
		/* Add appropriate styles for the image */
	}

	.details {
		font-size: 26rpx;
		float: left;
		color: #5C5C5C;
	}

	.details-row {
		height: 30rpx;
		margin-top: 20rpx;
	}

	.label {
		float: left;
	}

	.imagg {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4px;
		margin-top: 40rpx;
	}

	.card2 {
		width: 90vw;
		height: 60vh;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #dfdfdf;
		margin-bottom: 18px;
		overflow: auto;
	}

	.card3 {
		width: 90vw;
		height: 100rpx;
		background-color: #fff;
		margin: 0 auto;
		padding: 20rpx;
		box-sizing: border-box;
		box-shadow: 0 2px 10px #d8d8d8;
		border-radius: 30rpx;
		margin-bottom: 18px;
	}

	.bodyy {
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		/* 超出部分隐藏，可根据需求调整 */
	}

	.bodyy::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.bottom1 {
		width: 45%;
		margin-right: 10%;
		height: 70rpx;
		float: left;
		margin-top: 25rpx;
		background: #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #A3A3A3;
		border-radius: 20rpx;
		box-sizing: border-box;
		border: 1px solid #D4D4D4;
		padding: 1px;
	}

	.bottom2 {
		width: 45%;
		height: 70rpx;
		float: left;
		margin-top: 25rpx;
		background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 20rpx;
	}

	.bottom3 {
		width: 80%;
		height: 70rpx;
		float: left;
		margin-top: 25rpx;
		background-image: linear-gradient(to bottom right, #94A9FD, #9ECFFF, #b9e1ff);
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 20rpx;
	}
</style>